import { Table } from 'antd';
import type { TablePaginationConfig, TableProps } from 'antd';
import { getUsers, User } from '../../apis/users';
import { useEffect, useState } from 'react';

export default function UsersTable() {
  const columns: TableProps<User>['columns'] = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      render: (id) => <a>{id}</a>,
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Gender',
      dataIndex: 'gender',
      key: 'gender',
    },
    {
      title:'State',
      dataIndex:'state',
      key:'state'
    }
  ];

  const [data, setData] = useState<User[]>([]);
  const [page, setPage] = useState<Pick<TablePaginationConfig, 'pageSize' | 'current' | 'total'>>({
    pageSize: 10,
    current: 1,
    total: 0,
  });

  useEffect(() => {
    getUsers(page.current!, page.pageSize!).then((pager) => {
      setData(pager.data);
      setPage({ pageSize: pager.pageSize, current: pager.pageNo, total: pager.totalCount });
    });
  }, []);

  return (
    <div>
      <Table columns={columns} dataSource={data} pagination={page} />
    </div>
  );
}
